
<template>
	<div class="account_zh">
		<!--上边-->
		<div >
			<div >
				<el-form :inline="true" :model="filters"  ref="filters" :rules="rules" class="demo-form-inline">
					<el-form-item label="姓名"   prop="name">
						<el-input v-model="filters.name" ></el-input>
					</el-form-item>
					<el-form-item label="登录账号"   prop="account"> 
						<el-input v-model="filters.account" ></el-input>
					
					</el-form-item>
					<el-form-item label="电话"  prop="tel">
						<el-input v-model.number="filters.tel" ></el-input>
					</el-form-item>
					<el-form-item style="margin-left:30%">
						<el-button type="primary" @click="reset('filters')" >重置</el-button>
					</el-form-item>
					<el-form-item style="margin-left:100px">
						<el-button type="primary" @click="searchsubmitForm('filters')">搜索</el-button>
					</el-form-item>
				</el-form>
			</div>	
		</div>
		<div class="zh_zeng"> 
			<el-button type="primary" @click="dialogFormVisible = true">账号新增</el-button>
		</div>
		<!--账号信息新增-->
		<el-dialog title="账号新增" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="登录账号" :label-width="formLabelWidth" prop="account">
					<el-input v-model="form.account" auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
				<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
					<el-input v-model="form.name" auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
				<el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
					<el-input v-model="form.tel"  auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
					<el-input v-model="form.email"  auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
				<el-form-item label="可访问菜单" :label-width="formLabelWidth">
					<div style="border:1px solid gray">
						<el-tree
							:data="data4"
							show-checkbox
							default-expand-all
							node-key="id"
							ref="tree"
							check-strictly
							highlight-current
							:props="defaultProps">
						</el-tree>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer buttons">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="getCheckedKeys('form')">确 定</el-button>
			</div>
		</el-dialog>
	<!--账号信息修改-->
		<el-dialog title="账号修改" :visible.sync="dialogFormVisible1" >
			<el-form :model="form1" :rules="rules" ref="form1" label-width="100px" class="demo-ruleForm">
				<el-form-item label="登录账号" :label-width="formLabelWidth" prop="account">
					<el-input v-model="form1.account" auto-complete="off" style="width:60%" disabled></el-input>
				</el-form-item>
				<el-form-item label="姓名" :label-width="formLabelWidth" readonly prop="name">
					<el-input v-model="form1.name" auto-complete="off" style="width:60%" disabled></el-input>
				</el-form-item>
				<el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
					<el-input v-model="form1.tel"  auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
					<el-input v-model="form1.email"  auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
				<el-form-item label="可访问菜单" :label-width="formLabelWidth">
					<div style="border:1px solid gray">
						<el-tree   
						 :data="data4" show-checkbox="" default-expand-all="" node-key="id" ref="tree"  check-strictly  highlight-current :default-checked-keys="form1.menu" :props="defaultProps">
						</el-tree>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm('form1')">重置</el-button>
				<el-button type="primary" @click="modifysubmitform('form1')">确 定</el-button>
			</div>
		</el-dialog>

		<!--中间内容-->
		<el-table
		:data="tableData"
		border
		v-loading="listLoading"
		:header-cell-class-name="tableheaderClassName"
		:row-class-name="tableRowClassName">
		<el-table-column 
		prop="account"
		label="登录账号">
		</el-table-column>
		<el-table-column
		prop="name"
		label="姓名"
		width="100px">
		</el-table-column>
		<el-table-column
		prop="tel"
		label="电话">
		</el-table-column>
		<el-table-column
		prop="email"
		label="邮箱">
		</el-table-column>
		<el-table-column
		prop="user"
		label="创建人"
		width="100px">
		</el-table-column>
		<el-table-column
		prop="createTime"
		label="创建时间">
		</el-table-column>	
		<el-table-column
		fixed="right"
		label="操作"
		width="180">
		<template slot-scope="scope">
			<el-button   @click="resetPwd(scope.row)"  size="small" type="text" ><span style=
				"color:#212121">重置密码</span>
			</el-button>
			<el-button   @click="modify(scope.row,scope)"  size="small" type="text" ><span >修改</span>
			</el-button>
			<el-button   @click="deletedata(scope.row)"  size="small" type="text"><span >删除</span>
			</el-button>
		</template>
		</el-table-column>	     
		</el-table>

		<!--底部分页内容-->
		<div class="di">
			<div style="float:right;width:30%">
				<el-pagination
				background
				layout="prev, pager, next" 
				@current-change="handleCurrentChange" 
				:total="total" >
				</el-pagination>
			</div>
		</div>
		<!-- 重置密码 -->
		<el-dialog
		title="提示"
		:visible.sync="centerDialogVisible"
		width="30%"
		center>
		<span style="margin-left:20px">初始密码为:123456</span>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="centerDialogVisible = false">复制</el-button>
		</span>
		</el-dialog>
</div>
</template>
<script>
import {isvalidPhone} from '../../validate.js' //手机号的验证
import util from '../../common/js/date.js';
import { getUserListPage, removeUser,editUser, addUser } from '../../api/fictitious.js';
//定义一个全局的变量，谁用谁知道
var validPhone=(rule, value,callback)=>{
	if (!value){
		callback(new Error('请输入电话号码'))
	}else  if (!isvalidPhone(value)){
		callback(new Error('请输入正确的11位手机号码'))
	}else {
		callback()
	}
}
export default {
	name:'zhanghu',
	data() {
		return {
			keys:[ ],
			filters: {
				name:'',
				account:'',
				tel:'17829019396'
			},
			page: 1,
			total: 0,
			biao:"账号管理",
			listLoading:false,
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			rules:{
				name:[
					{required:true,message:'姓名不能为空',trigger:'blur'},
					{min:2,max:12,message:'姓名长度须在2-16之间',trigger:'blur'}
				],
				account:[
					{required:true,message:'账号不能为空',trigger:'blur'}
				],
				tel:[
					{ required: true, trigger: 'blur', validator: validPhone }//这里需要用到全局变量
				],
				email:[
					{required:true,message:'邮箱不能为空',trigger:'blur'},
					{type:"email",message:'输入正确的邮箱',trigger:'blur'},
				]
			},
			centerDialogVisible:false,
			tableData: [],
			dialogFormVisible: false,
			dialogFormVisible1: false,
			form: {
				biao:'账号管理',
				name: '1111',
				account: '1111',
				email: '1111',
				tel:'11111',
				menu:[],
				user:"管理员",
				createTime:new Date()
			},
			data4: [{
				id: 1,
				label: '产品管理',
				children: [{
					id: 4,
					label: '设备管理',

				}]
			},
			{
				id: 2,
				label: '策略管理',
				children: [{
					id: 5,
					label: '策略分析'
				},]
			}, 
			{
				id: 3,
				label: '应用展览',
				children: [{
					id: 6,
					label: '应用添加'
				}, {
					id: 7,
					label: '应用修改'
				}]
			}],
			form1: {
				id:'',
				biao:'账号管理',
				name: '',
				account: '',
				email: '',
				tel:'',
				menu:[],
				user:"",
				createTime:new Date()
			},
			formLabelWidth: '120px',
		};
	},
	methods:{
		//获取用户列表
		getUsers() {
			let para = {
				page: this.page,
				name: this.filters.name,
				account: this.filters.name,
				tel: this.filters.tel,
				table:this.biao,
			};
			this.listLoading = true;
			getUserListPage(para).then((res) => {				
				this.total = res.data.total;
				this.tableData=res.data.accountZhangHu;
				// that.tableData = [];
				// res.data.accountZhangHu.forEach((item,index)=>{
				// 	console.log(item);
				// 	that.tableData.push(item)
				// });
				for(var i=0;i<this.tableData.length;i++){
					this.tableData[i].createTime = util(this.tableData[i].createTime)
				}	
				this.listLoading = false;
				console.log(this.tableData);
			});
		},
		// 搜索重置
		reset(formName){
			this.$refs[formName].resetFields();
		},
		//搜索按钮逻辑实现
		searchsubmitForm(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					var str=this.filters.name;
					var account=this.filters.account;
					var re =/[`~!@#$%^&*_+<>{}'[\]]/im;
					if (re.test(str)||re.test(account)){
						this.$message({
							message: '不能有特殊字符',
							type: 'warning'
						});
					}else{
						this.getUsers();
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		// 分页获取
		handleCurrentChange(val) {
			this.page = val;
			this.getUsers();
		},
		// 账号修改重置
		resetForm(formName){
			this.$refs[formName].resetFields();
			this.form1.email='';
			this.form1.tel='';
		},
		// 修改按钮逻辑实现
		modifysubmitform(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.form1.menu=this.$refs.tree.getCheckedKeys();   				
					let para = Object.assign({}, this.form1);
					console.log(para);
					editUser(para).then(() => {
						this.$message({
							message: '提交成功',
							type: 'success'
						});
						this.$refs['form1'].resetFields();
						this.dialogFormVisible1 = false;
						this.getUsers();
						this.$refs.tree.setCheckedKeys([]);						
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		// 增加按钮逻辑实现
		getCheckedKeys(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.form.menu=this.$refs.tree.getCheckedKeys();
					this.addLoading = true;
					let para = Object.assign({}, this.form);
					para.createTime = (!para.createTime || para.createTime == '') ? '' : util.formatDate.format(new Date(para.createTime), 'yyyy-MM-dd');		
					console.log(para);
					addUser(para).then(() => {
						this.addLoading = false;
						this.$message({
							message: '提交成功',
							type: 'success'
						});
						this.$refs['form'].resetFields();
						this.dialogFormVisible = false;
						this.getUsers();
						this.$refs.tree.setCheckedKeys([]);
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},   	
		// 表格修改数据
		modify(row) {	
			this.dialogFormVisible1=true;
			this.form1.menu = [];
			this.form1.menu = row.menu;
			//     		row.menu.forEach((item,index)=>{
			// 		this.form1.menu.push(item)
			// });
			if(this.$refs.tree) {this.$refs.tree.setCheckedKeys(this.form1.menu);}
			this.form1.name=row.name;
			this.form1.account=row.account;
			this.form1.email=row.email;
			this.form1.tel=row.tel;
			this.form1.id=row.id,      		 	
			this.form1.user=row.user,
			this.form1.createTime=row.createTime;
		},
		// 重置密码
		resetPwd(){
			this.centerDialogVisible=true;
		},
		deletedata(row){
			this.$confirm('确认要删除此账号吗？', '提示', {
				confirmButtonText: '是',
				cancelButtonText: '否',
				type: 'warning',
				center: true
			}).then(() => {
				this.listLoading = true;
				console.log(row);
				let para = { id: row.id, table:"账号管理" };
				console.log(para);
				removeUser(para).then(() => {
					this.listLoading = false;
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.getUsers();
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		// 表格样式
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
	},
	mounted() {
		this.getUsers();
	}
};
</script>
<style scoped>
.account_zh{width:90%;margin:0 auto;}
.account_zh .di{width:80%;margin-top:20px;position:relative;left:5.5%;top:5%; bottom:10%;line-height:36px;}
.account_zh .zh_zeng{
	float: right;
	margin-top:0px;
	margin-bottom: 40px;
}
</style>
